<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="AI Chat with Enterprise Data" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <title>AI Chat with Enterprise Data</title>
    <style>
      :root {
        --azc-primary: #07c;
        --azc-bg: #eee;
        --azc-border-radius: 16px;
      }
      html,
      body {
        font-size: 16px;
        margin: 0;
        background: var(--azc-bg);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }
      nav {
        display: flex;
        flex: 0 1 auto;
        background: #333;
        color: #fff;
        padding: 16px;
        font-family:
          'Segoe UI',
          -apple-system,
          BlinkMacSystemFont,
          Roboto,
          'Helvetica Neue',
          sans-serif;
        font-size: 1.25rem;
        align-items: center;

        & img {
          height: 32px;
          margin-right: 0.5em;
        }
      }
      main {
        container-type: size;
        flex: 1;
        position: relative;
        display: flex;
      }
      azc-chat {
        flex: 1;
        max-width: 1024px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <nav>
      <img src="/favicon.png" alt="" />
      AI Chat with Enterprise Data
    </nav>
    <main>
      <azc-history id="chatHistory"></azc-history>
      <azc-chat id="chat"></azc-chat>
    </main>
    <script type="module" src="/src/index.ts"></script>
    <script>
      // Generate a unique ID and store it in local storage
      const userId = localStorage.getItem('userId') || crypto.randomUUID();
      localStorage.setItem('userId', userId);

      window.chatHistory.userId = userId;
      window.chatHistory.addEventListener('loadSession', (e) => {
        const { id, messages } = e.detail;
        window.chat.sessionId = id;
        window.chat.messages = messages;
      });

      window.chat.userId = userId;
      window.chat.addEventListener('messagesUpdated', () => {
        window.chatHistory.refresh();
      });
    </script>
  </body>
</html>
